<%@page import="objects.AnalyticDataSource"%>
<%@page import="models.DomainAnalyticModel"%>
<%
DomainAnalyticModel analytic = (DomainAnalyticModel) request.getAttribute("analytic");
AnalyticDataSource visitPerMonth = analytic.getVisitPerMonth();
AnalyticDataSource visitPerYear = analytic.getVisitPerYear();
AnalyticDataSource visitPerMonthByLocation = analytic.getVisitPerMonthByLocation();
%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChartVisitPerMonth);
      google.setOnLoadCallback(drawChartVisitPerYear);
      function drawChartVisitPerMonth() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Visitor', 'Page View'],
          <%
          for(int i = 0; i < visitPerMonth.getEntries().size(); i++) {
          %>
          ['<%=visitPerMonth.getEntries().get(i).getGa_date()%>',  <%=visitPerMonth.getEntries().get(i).getGa_visits()%>,      <%=visitPerMonth.getEntries().get(i).getGa_pageviews()%>]
          <%  if (i < visitPerMonth.getEntries().size() - 1) { %>,  
          <%  } 
          } %>
        ]);

        var options = {
          title: 'Visit Per Month'
        };

        var chartVisitPerMonth = new google.visualization.LineChart(document.getElementById('visit_per_month'));
        chartVisitPerMonth.draw(data, options);
      }
      
      function drawChartVisitPerYear() {
          var data = google.visualization.arrayToDataTable([
            ['Month', 'Visitor', 'Page View'],
            <%
            for(int i = 0; i < visitPerYear.getEntries().size(); i++) {
            %>
            ['<%=visitPerYear.getEntries().get(i).getGa_month()%>',  <%=visitPerYear.getEntries().get(i).getGa_visits()%>,      <%=visitPerYear.getEntries().get(i).getGa_pageviews()%>]
            <%  if (i < visitPerYear.getEntries().size() - 1) { %>,  
            <%  } 
            } %>
          ]);

          var options = {
            title: 'Visit Per Year'
          };

          var chartVisitPerYear = new google.visualization.LineChart(document.getElementById('visit_per_year'));
          chartVisitPerYear.draw(data, options);
        }
    </script>
    
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Visits'],
          <%
          for(int i = 0; i < visitPerMonthByLocation.getEntries().size(); i++) {
          %>
          ['<%=visitPerMonthByLocation.getEntries().get(i).getGa_country()%>', <%=visitPerMonthByLocation.getEntries().get(i).getGa_visits()%>]
          <%  if (i < visitPerMonthByLocation.getEntries().size() - 1) { %>,  
          <%  } 
          } %>
        ]);

        var options = {
        	title: 'Visit Per Month By Location'
        };

        var chart = new google.visualization.GeoChart(document.getElementById('visit_per_month_by_location'));
        chart.draw(data, options);
    };
    </script>
</head>
<body>
<div id="visit_per_month" style="width: 1200px; height: 300px;"></div>
<div id="visit_per_year" style="width: 1200px; height: 300px;"></div>
<div id="visit_per_month_by_location" style="width: 900px; height: 500px;"></div>
</body>
</html>